<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#pic {
				width: 200px;
				height: 200px;
				margin: 50px, auto;
				border: 1px solid red;
			}
			#pic>div{
				width: 100%;
				height: 100%;
			}
			
			#pic>div>img {
				width: 200px;
				position: absolute;
				left: 10px;
				top: 10px;
				/*display: none;*/
			}
		</style>
	</head>

	<body>

		<div id="pic">
			
			<div><img id="pic2" src="img/2.jpg" /></div>
			<div><img id="pic3" src="img/3.jpg" /></div>
			<div><img id="pic4"  src="img/4.jpg" /></div>
			<div><img id="pic5"  src="img/5.jpg" /></div>
		</div>
		<div id="text">
			<div id="t1">
				---1---
			</div>
			<div id="t2">
				---2---
			</div>
			<div id="t3">
				---3---
			</div>
			<div id="t4">
				---4---
			</div>
		</div>
		<script type="text/javascript">
			window.onload = init;
			var n = 1; //图片标记数
			var dingshi; //让图片动的定时器
			function init() {
				dingshi = window.setInterval("tupian()", 1000);
			}
			//更换图片
			function tupian() {
				var obj = document.getElementById("pic1");
				n++;
				if(n >= 4) {
					n = 1;
				}
				obj.src = "yaj_" + n + ".jpg";
			}
			//鼠标放上图片停止
			function stoptupian() {
				window.clearInterval(dingshi);
			}
			//鼠标离开图片动起来
			function dongqilai() {
				dingshi = window.setInterval("tupian()", 1000);
			}
		</script>

	</body>

</html>